*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  @extend %font;
  width: 100vw;
  height: 100vh;
  background-color: $body_base_color;
}

img {
  display: block;
  height: auto;
  margin: 0 auto;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

p,
span {
  font-size: $rem;
  line-height: 1.4;
  color: $gray;
}

strong {
  font-size: $rem;
  font-weight: 800;
}

a {
  color: $blue;
  text-decoration: underline;

  &:hover {
    text-decoration: underline $blue-3;
  }
}

hr {
  margin: 0.6 * $rem 0;
  border-bottom: 1px solid $gray;
}

em,
i {
  font-size: 1.1 * $rem;
  font-style: italic;
}

small,
figcaption {
  font-size: 0.9 * $rem;
}

del {
  color: $gray;
}

sup,
sub {
  font-size: 78%;
  position: relative;
  vertical-align: baseline; 
}

sup {
  top: -0.4 * $rem;
}

sub {
  bottom: -0.4 * $rem;
}

// setup of forms

button,
input,
select,
textarea {
  @extend %font-form;
  border: none;
  border: 1px solid $gray;

  + label,
  + input[type="checkbox"],
  + input[type="radio"] {
    page-break-before: always;
  }
}

fieldset {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  legend {
    margin: 1.2 * $rem 0;
  }
}

option {
  @extend %font;
}

textarea {
  min-height: 6 * $rem;
  min-width: 20 * $rem;
  max-width: 38 * $rem;
}

label {
  display: inline-block;
  margin-bottom: .7 * $rem;
  font-weight: 600;
  font-size: 1.1 * $rem;
  color: $dark;

  + * {
    page-break-before: always;
  }

  > input {
    margin-bottom: 0;
  }
}

input[type="submit"],
input[type="reset"],
button {
  background: $whiteDark;
  color: $darkLight;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  display: inline;
  margin-bottom: $rem;
  margin-right: .7 * $rem;
  padding: 0.6 * $rem;

  &:hover {
    background: darken($white, 15);
    color: $dark;
  }

  &[disabled] {
    background: darken($white, 10);
    color: darken($gray, 10);
    cursor: not-allowed;
  }
}

input[type="submit"],
button[type="submit"] {
  background: $blue;
  color: $white;

  &:hover {
    background: darken($blue, 11);
    color: darken($white, 23);
  }
}

input[type="button"],
button[type="button"] {
  background: $green;
  color: $white;

  &:hover {
    background: darken($green, 11);
    color: darken($white, 23);
  }
}

input,
select,
label {
  margin-right: 0.7 * $rem;
}

input,
select,
textarea {
  margin-bottom: $rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="phone"],
input[type="tel"],
input[type="number"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="color"],
input[type="time"],
input[type="search"],
input[type="range"],
input[type="file"],
input[type="datetime-local"],
select,
textarea {
  border: 1px solid $gray;
  padding: .6 * $rem .5 * $rem;
}

input[type="checkbox"],
input[type="radio"] {
  flex-grow: 0;
  height: 1.65 * $rem;
  margin-left: 0;
  margin-right: .7 * $rem;
  vertical-align: middle;

  + label {
    page-break-before: avoid;
  }
}

select[multiple] {
  min-width: 16 * $rem;
}

canvas {
  height: 10 * $rem;
  width: 20 * $rem;
  max-width: 100%;
}

section,
main,
article {
  margin: 0 auto;
  width: 100%;
}

nav {
  text-align: center;
  
  ul {
    margin: 0;
    text-align: center;

    li {
      display: inline-block;
      
      & + li {
        margin-left: 0.7 * $rem;
      }
    }
  }
}

p {
  font-weight: 400;
  color: $gray;
}

// setup of lists

dl,
ol,
ul {
  margin-top: 0.9 * $rem;
  margin-bottom: 0.9 * $rem;
}

li {
  dl,
  ol,
  ul {
    margin-bottom: 0;
  }
}

dl {
  display: inline-block;
}

dt {
  padding: 0 $rem;
}

dd {
  padding: 0 $rem (.25 * $rem);

  &:last-of-type {
    border-bottom: (.06 * $rem) solid $gray;
  }

  + dt {
    border-top: (.06 * $rem) solid $gray;
    padding-top: .5 * $rem;
  }
}

// setup of tables

table,
th,
td,
tr {
  border: 1px solid $dark;
  border-collapse: collapse;
}

table {
  display: table;
  width: 100%;
}

th {
  font-weight: 600;
}

td,
th {
  text-align: left;
  padding: 0.8 * $rem;
}

caption {
  font-weight: 600;
  font-size: $rem;
  margin-bottom: 0.8 * $rem;
}

// setup of pre 

pre,
code,
kbd,
samp,
var,
output {
  font-family: $monospace;
  font-size: 0.9 * $rem;
}

code,
kbd {
  padding: 0.5 * $rem;
  border-radius: 0.3 * $rem;
  background: $whiteDark;
  color: $green;
  display: inline-block;
}

kbd {
  background: $green;
  color: $white;
  border: 1px solid $green; 
}

pre {
  border-left: .1 * $rem solid lighten($dark, 25);
  line-height: 0.8 * $rem;
  overflow: auto;
  padding-left: 0;

  code {
    background: none;
    border: 0;
    line-height: 1.65 * $rem;
    padding: 0;
  }
}

// setup of responsive

@media (max-width: $responsive_mobile) {
  header,
  footer {
    padding: 0.8 * $rem 0;
  }

  main,
  section,
  article {
    margin: 0 auto;
    max-width: 100%;
  }

  input,
  textarea,
  select,
  p,
  table {
    width: 100%;
    max-width: 24 * $rem;
    min-width: 0;
  }

  canvas {
    height: 9 * $rem;
    width: 18 * $rem;
  }
}
